<template>
    <div>
        <el-row :gutter="20" class="row-content">
            <el-col :span="6" v-for="(item, index) in statistics" :key="index">
                <el-card shadow="never" class="card-border-none">
                    <div class="card-content">
                        <el-icon :size="20" :style="item.color"
                            style="width:40px;height: 40px;">
                            <User v-if="index == 0" />
                            <ShoppingCart v-if="index == 1" />
                            <PriceTag v-if="index == 2" />
                            <Timer v-if="index == 3" />
                        </el-icon>
                        <div class="content-title">
                            <span style="font-weight:bold;font-size:18px">{{ item.value }}</span>
                            <small style="color:#9ca3af;margin-top:12px">{{ item.label }}</small>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-card shadow="never" style="border: none">
            <!-- 搜索 -->
            <search-header
                :model="searchForm"
                @search="getData"
                @reset="resetSearchForm"
            >
                <search-header-item label="时间选择" prop="tag">
                    <el-radio-group v-model="searchForm.tag">
                        <el-radio-button value="all">
                            全部
                        </el-radio-button>
                        <el-radio-button value="today">
                            今天
                        </el-radio-button>
                        <el-radio-button value="yesterday">
                            昨天
                        </el-radio-button>
                        <el-radio-button value="last7days">
                            最近7天
                        </el-radio-button>
                    </el-radio-group>
                </search-header-item>
                <template #show>
                    <search-header-item label="开始时间" prop="date">
                        <el-date-picker v-model="searchForm.date" type="date" placeholder="开始日期" style="width:100%"/>
                    </search-header-item>
                    <search-header-item label="结束时间" prop="date">
                        <el-date-picker v-model="searchForm.date" type="date" placeholder="结束日期" style="width:100%"/>
                    </search-header-item>
                    <search-header-item label="关键词" prop="keyword">
                        <el-input v-model="searchForm.keyword" placeholder="请输入关键词" clearable style="width:100%"></el-input>
                    </search-header-item>
                </template>
            </search-header>

            <!-- 表格 -->
            <el-table id="list-table" :data="tableData" style="width: 100%" stripe lazy>
                <el-table-column label="ID" prop="user_id" align="center" />
                <el-table-column label="头像" width="65">
                    <template #default="{ row }">
                        <el-avatar :size="38" :src="row.avatar"></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column label="用户信息" width="280">
                    <template #default="{ row }">
                        <small style="display:block">昵称：{{ row.nickname }}</small>
                        <small style="display:block">姓名：{{ row.real_name }}</small>
                        <small style="display:block">电话：{{ row.phone }}</small>
                    </template>
                </el-table-column>
                <el-table-column label="推广用户数量" prop="spread_count" align="center"/>
                <el-table-column label="订单数量" prop="order_count" align="center"/>
                <el-table-column label="订单金额" prop="order_price" align="center"/>
                <el-table-column label="账户佣金" prop="now_money" align="center"/>
                <el-table-column label="已提现金额" prop="extract_count_price" align="center"/>
                <el-table-column label="提现次数" prop="extract_count_num" align="center"/>
                <el-table-column label="未提现金额" prop="new_money" align="center"/>
                <el-table-column fixed="right" label="操作" width="180" align="center">
                    <template #default="{ row }">
                        <el-button link type="primary" size="small" @click="openFormDrawerRef(row.user_id, 'user')">推广人</el-button>
                        <el-button link type="primary" size="small" @click="openFormDrawerRef(row.user_id, 'order')" style="margin-left:24px">推广订单</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination">
                <el-pagination
                :currentPage="currentPage"
                background
                layout="prev, pager, next"
                :page-size="limit"
                :total="total"
                @current-change="getData"
                ></el-pagination>
            </div>
        </el-card>

        <form-drawer size="70%" ref="formDrawerRef" :title="drawerTitle" :showActions="false" :destroyOnClose="true">
            <el-form :model="drawerSearchForm" label-width="80px">
                <el-form-item label="时间选择" prop="tag">
                    <el-radio-group v-model="drawerSearchForm.tag">
                        <el-radio-button value="all">
                            全部
                        </el-radio-button>
                        <el-radio-button value="today">
                            今天
                        </el-radio-button>
                        <el-radio-button value="yesterday">
                            昨天
                        </el-radio-button>
                        <el-radio-button value="last7days">
                            最近7天
                        </el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item prop="date" label="开始时间" style="max-width:450px;">
                    <el-date-picker v-model="drawerSearchForm.date" type="date" placeholder="开始日期"/>
                </el-form-item>
                <el-form-item prop="date" label="结束时间" style="max-width:450px;">
                    <el-date-picker v-model="drawerSearchForm.date" type="date" placeholder="结束日期"/>
                </el-form-item>
                <el-form-item label="用户类型" prop="tag">
                    <el-radio-group v-model="drawerSearchForm.user_type">
                        <el-radio-button value="all">
                            全部
                        </el-radio-button>
                        <el-radio-button value="first">
                            一级推广
                        </el-radio-button>
                        <el-radio-button value="second">
                            二级推广
                        </el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="关键词" prop="keyword">
                    <el-input style="width:200px;" v-model="drawerSearchForm.keyword" placeholder="请输入关键词" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @search="getData">搜索</el-button>
                    <el-button @click="resetSearchForm">重置</el-button>
                </el-form-item>
            </el-form>

            <el-table id="list-table" :data="drawerTableData" style="width: 100%" stripe lazy>
                <el-table-column label="订单ID" prop="order_id" />
                <el-table-column label="昵称|电话|姓名" prop="user_info" />
                <el-table-column label="时间" prop="_add_time" />
                <el-table-column label="返佣金额" prop="brokerage_price" width="120"/>
            </el-table>

            <!-- 分页 -->
            <div class="pagination">
                <el-pagination
                :currentPage="drawerPager.currentPage"
                background
                layout="prev, pager, next"
                :page-size="drawerPager.limit"
                :total="drawerPager.total"
                @current-change="handleDrawerPageChange"
                ></el-pagination>
            </div>
        </form-drawer>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import SearchHeader from '~/components/SearchHeader.vue'
import SearchHeaderItem from '~/components/SearchHeaderItem.vue'
import ListHeader from '~/components/ListHeader.vue'
import FormDrawer from '~/components/FormDrawer.vue'
import useTestData from '~/composables/testData.js'

const searchForm = reactive({
    date: "",
    keyword: "",
    tag: "all"
})
// 重置表单
const resetSearchForm = () => {
    // form.date = ""
    // form.keyword = ""
    // form.tag = "all"
}

const tableData = ref([])

// 分页
const limit = ref(10)
const total = ref(0)
const currentPage = ref(1)
const handlePageChange = (p) => {
    currentPage.value = p
    getData()
}
function getData(page = false) {
    if (page) {
        currentPage.value = page
    }
    const { list, count } = useTestData("distributions")
    tableData.value = list.splice((currentPage.value - 1) * 10, limit.value)
    total.value = count
}

const statistics = ref([{
    color: "color:#60a5fa",
    label: "分销员人数(人)",
    value: "12842"
}, {
    color: "color:#fb923c",
    label: "订单数(单)",
    value: "801"
}, {
    color: "color:#34d399",
    label: "订单金额(元)",
    value: "12842"
}, {
    color: "color:#818cf8",
    label: "提现次数(次)",
    value: "6"
}])

const drawerTitle = ref("")
const formDrawerRef = ref(false)

const drawerSearchForm = reactive({
    date: "",
    keyword: "",
    tag: "all",
    user_type:"all"
})
// 重置表单
const resetDrawerSearchForm = () => {
    form.date = ""
    form.keyword = ""
    form.tag = "all"
    form.user_type = "all"
}

const drawerTableData = ref([])
const drawerPager = reactive({
    limit:10,
    total:0,
    currentPage:1
})
const openFormDrawerRef = (id, type) => {
    drawerTitle.value = type == 'user' ? "推广人列表" : "推广订单"
    const {list,count} = useTestData("distribution_orders")
    drawerTableData.value = list
    drawerPager.total = count
    formDrawerRef.value.open()
}

const handleDrawerPageChange = (p = false)=>{
    if (p) {
        drawerPager.currentPage = p
    }
    const {list,count} = useTestData("distribution_orders")
    drawerTableData.value = list.splice((drawerPager.currentPage - 1) * 10, drawerPager.limit)
}

onMounted(() => {
    getData()
})
</script>
<style lang="scss" scoped>
.row-content {
    margin-bottom: 20px;
    .card-border-none {
        border: none;
        .card-content {
            display: flex;
            align-items: center;
            .content-title {
                display: flex;
                flex-direction: column;
            }
        }
    }
}
.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
:deep(.el-card__body) {
  background: #fff;
  border-radius: 4px;
}
</style>